<template>
	<view class="page">
		<view v-if="goodsInfo" class="goods-card bg-w pd30 mb20">
			<view class="goods-header">
				<image :src="goodsInfo.image" mode="aspectFill" class="goods-image"></image>
				<view class="goods-info">
					<view class="goods-title">{{goodsInfo.title}}</view>
					<view class="goods-price">¥{{goodsInfo.price}}</view>
					<view class="commission-rate">佣金：{{goodsInfo.commission_rate}}%</view>
				</view>
			</view>
		</view>
		
		<view class="promotion-tools bg-w pd30 mb20">
			<view class="section-title">推广工具</view>
			
			<view class="tool-item" @click="generatePoster">
				<view class="tool-icon">
					<text class="iconfont">🎨</text>
				</view>
				<view class="tool-info">
					<view class="tool-title">生成海报</view>
					<view class="tool-desc">生成专属推广海报，一键分享</view>
				</view>
				<text class="iconfont iconbtn_more"></text>
			</view>
			
			<view class="tool-item" @click="copyLink">
				<view class="tool-icon">
					<text class="iconfont">🔗</text>
				</view>
				<view class="tool-info">
					<view class="tool-title">复制链接</view>
					<view class="tool-desc">复制推广链接，分享给好友</view>
				</view>
				<text class="iconfont iconbtn_more"></text>
			</view>
			
			<view class="tool-item" @click="shareMoments">
				<view class="tool-icon">
					<text class="iconfont">📱</text>
				</view>
				<view class="tool-info">
					<view class="tool-title">朋友圈分享</view>
					<view class="tool-desc">一键分享到朋友圈</view>
				</view>
				<text class="iconfont iconbtn_more"></text>
			</view>
			
			<view class="tool-item" @click="createQRCode">
				<view class="tool-icon">
					<text class="iconfont">📱</text>
				</view>
				<view class="tool-info">
					<view class="tool-title">推广二维码</view>
					<view class="tool-desc">生成专属推广二维码</view>
				</view>
				<text class="iconfont iconbtn_more"></text>
			</view>
		</view>
		
		<view class="promotion-data bg-w pd30 mb20">
			<view class="section-title">推广数据</view>
			
			<view class="data-stats">
				<view class="stat-item">
					<text class="value">{{promotionData.clicks}}</text>
					<text class="label">点击次数</text>
				</view>
				<view class="stat-item">
					<text class="value">{{promotionData.visits}}</text>
					<text class="label">访问人数</text>
				</view>
				<view class="stat-item">
					<text class="value">{{promotionData.orders}}</text>
					<text class="label">成交订单</text>
				</view>
				<view class="stat-item">
					<text class="value">¥{{promotionData.commission}}</text>
					<text class="label">获得佣金</text>
				</view>
			</view>
			
			<view class="chart-section">
				<view class="chart-title">最近7天推广趋势</view>
				<view class="chart-placeholder">
					<text>图表展示区域</text>
				</view>
			</view>
		</view>
		
		<view class="promotion-tips bg-w pd30 mb20">
			<view class="section-title">推广技巧</view>
			<view class="tip-list">
				<view class="tip-item">
					<text class="tip-number">1</text>
					<text class="tip-content">分享到微信群和朋友圈，提高曝光率</text>
				</view>
				<view class="tip-item">
					<text class="tip-number">2</text>
					<text class="tip-content">结合使用场景进行推广，提高转化率</text>
				</view>
				<view class="tip-item">
					<text class="tip-number">3</text>
					<text class="tip-content">定期发布推广内容，保持活跃度</text>
				</view>
				<view class="tip-item">
					<text class="tip-number">4</text>
					<text class="tip-content">邀请好友一起分销，获得二级佣金</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			goodsId: null,
			goodsInfo: null,
			promotionData: {
				clicks: 156,
				visits: 89,
				orders: 12,
				commission: '156.80'
			}
		};
	},
	computed: {
		...mapState(['memberInfo']),
		isLogin() {
			return this.memberInfo == null ? false : true;
		}
	},
	onLoad(options) {
		this.goodsId = options.goodsId;
		this.loadGoodsInfo();
	},
	methods: {
		loadGoodsInfo() {
			// 模拟商品数据
			this.goodsInfo = {
				id: this.goodsId,
				title: '豪华双人汉堡套餐',
				price: 39.9,
				commission_rate: 25,
				image: 'https://picsum.photos/seed/promo1/150/150.jpg'
			};
		},
		
		generatePoster() {
			uni.showLoading({ title: '正在生成海报...' });
			
			setTimeout(() => {
				uni.hideLoading();
				uni.showModal({
					title: '海报生成成功',
					content: '海报已保存到相册，请分享给好友',
					showCancel: false,
					success: () => {
						uni.showToast({ title: '分享成功', icon: 'success' });
					}
				});
			}, 2000);
		},
		
		copyLink() {
			const link = `https://demo.woyaou.com/goods/detail?id=${this.goodsId}&inviter=${this.memberInfo.id}`;
			
			uni.setClipboardData({
				data: link,
				success: () => {
					uni.showToast({ title: '链接已复制', icon: 'success' });
				}
			});
		},
		
		shareMoments() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneTimeline',
				type: 0,
				href: `https://demo.woyaou.com/goods/detail?id=${this.goodsId}&inviter=${this.memberInfo.id}`,
				title: this.goodsInfo.title,
				summary: `限时优惠，佣金${this.goodsInfo.commission_rate}%，快来抢购！`,
				imageUrl: this.goodsInfo.image,
				success: () => {
					uni.showToast({ title: '分享成功', icon: 'success' });
				},
				fail: () => {
					uni.showToast({ title: '分享失败', icon: 'none' });
				}
			});
		},
		
		createQRCode() {
			uni.showModal({
				title: '推广二维码',
				content: '正在生成您的专属推广二维码...',
				showCancel: false,
				success: () => {
					// 这里应该显示二维码弹窗
					uni.showToast({ title: '二维码生成成功', icon: 'success' });
				}
			});
		}
	}
};
</script>

<style>
.goods-card {
	border-radius: 12rpx;
}

.goods-header {
	display: flex;
	align-items: center;
}

.goods-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.goods-info {
	flex: 1;
}

.goods-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 10rpx;
	line-height: 1.3;
}

.goods-price {
	font-size: 32rpx;
	color: #ff4757;
	font-weight: 600;
	margin-bottom: 10rpx;
}

.commission-rate {
	font-size: 24rpx;
	color: #ff6348;
	background: rgba(255, 99, 72, 0.1);
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 30rpx;
}

.tool-item {
	display: flex;
	align-items: center;
	padding: 25rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.tool-item:last-child {
	border-bottom: none;
}

.tool-icon {
	width: 80rpx;
	height: 80rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 36rpx;
	margin-right: 20rpx;
}

.tool-info {
	flex: 1;
}

.tool-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.tool-desc {
	font-size: 24rpx;
	color: #999;
}

.data-stats {
	display: flex;
	justify-content: space-around;
	margin-bottom: 40rpx;
}

.stat-item {
	text-align: center;
}

.stat-item .value {
	display: block;
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.stat-item .label {
	font-size: 24rpx;
	color: #999;
}

.chart-section {
	margin-top: 30rpx;
}

.chart-title {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.chart-placeholder {
	height: 200rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 24rpx;
}

.tip-list {
	margin-top: 20rpx;
}

.tip-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.tip-item:last-child {
	margin-bottom: 0;
}

.tip-number {
	width: 40rpx;
	height: 40rpx;
	background: #007aff;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.tip-content {
	flex: 1;
	font-size: 26rpx;
	color: #666;
	line-height: 1.4;
}
</style>